<template>
  <div>
    <p>{{msg}}</p>
    <button @click="updateMsg">数据更新</button>
    <button   @click="destroyFn">销毁</button>
  </div>
</template>

<script>
export default {
data(){
  return{
    msg:"哼哼哈哈",
    flag:true
  }
},
methods:{
  updateMsg(){
    this.msg="红红火火恍恍惚惚"

  },
  destroyFn(){
    this.$destroy()
  }
},
beforeCreate(){
  console.log("beforeCreate",this.msg)
},
created(){
  console.log("create",this.msg)
},
beforeMount(){
  console.log("beforeMount",document.querySelector('p'))
},
mounted(){
  console.log("mounted",document.querySelector('p'))
},
beforeUpdate(){
  console.log('beforeUpdate',document.querySelector('p').innerHTML)
},
updated(){
  console.log('update',document.querySelector('p').innerHTML)
},
beforeDestroy(){
  console.log("beforeDestory 销毁前触发")
},
destroyed(){
  console.log("destroyed  销毁后触发")
}
}
</script>

<style>

</style>